<{include file="public_html/header.html"}>
<{include file="public_html/left_menu.html"}>
<script type="text/javascript" charset="utf-8" src="/static/public/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/public/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/static/public/ueditor/lang/zh-cn/zh-cn.js"></script>
<style>
	.ss_document_box{position: relative;}
	.ss_document_box .layui-icon{position: absolute; left: 38px; top: 0;}
</style>
<blockquote class="layui-elem-quote"><{$action}></blockquote>

<form class="layui-form layui-form-pane" method="post" id="form_add_role">
	<input type="hidden" name="id" value="<{$topic_info['id']|default:'0'}>" />
	

	<div class="layui-form-item">
		<label class="layui-form-label">科目</label>
		<div class="layui-input-block">
			<select name="subject_id" id="subject" lay-filter="subject" lay-verify="required">
				<option value="0">请选择科目</option>
				<{foreach from=$subject item=item}>
					<option value="<{$item.id}>" <{if $topic_info['subject_id']|default:"33" eq $item.id}>selected="selected"<{/if}>><{$item.name}></option>
				<{/foreach}>
			</select>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">课本</label>
		<div class="layui-input-block">
			<select name="book_id" id="book" lay-filter="book" lay-verify="required">
				<option value="0">请选择课本</option>
				<{if isset($book_list) AND $book_list|count  > 0}>
				<{foreach from=$book_list item=book}>
					<option value="<{$book.id}>" <{if $book.id == $topic_info.book_id|default:"27"}> selected <{/if}>><{$book.title}></option>
				<{/foreach}>
				<{/if}>
			</select>
			<input type="hidden" id="book_name" name="book_name" />
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">章节</label>
		<div class="layui-input-block">
			<select name="chapter_id" id="chapter_id" lay-verify="required">
				<option value="0">请选择章节</option>
				<{if isset($chapter_list_data) AND $chapter_list_data|count  > 0}>
					<{foreach from=$chapter_list_data item=item}>
						<!-- <optgroup label="<{$item.title}>"> -->
						<option <{if $item.id == $topic_info.chapter_id|default:332}> selected <{/if}> value="<{$item.id}>"><{$item.title}></option>
						<{if $item.sub|count > 0}>
							<{foreach from=$item.sub item=item1}>
								<option <{if $item1.id == $topic_info.chapter_id|default:332}> selected <{/if}> value="<{$item1.id}>">----<{$item1.title}></option>
							<{/foreach}>
						<{/if}>
						<!-- </optgroup> -->
					<{/foreach}>
				<{/if}>
			</select>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">题目类型</label>
		<div class="layui-input-block">
			<select name="type" lay-verify="required" lay-filter="q_type" id="q_type" <{if $topic_info.type|default:"" > 0}> disabled <{/if}>>
				<option value="7" <{if 7 == $topic_info.type|default:""}> selected <{/if}>>算式题</option>
			</select>
		</div>
	</div>
	<div class="layui-form-item layui-form-text" id="html_subject_text">
		<label class="layui-form-label">题目内容<span id="tiankong_tishi" style="color:red; padding-left: 10px;">提示：填空题的题目内容中每4个“_”(例:____，)符作为一个题目答案选项</span></label>
		<div class="layui-input-block">
			<!-- 加载编辑器的容器 -->
		    <script id="container" name="subject_text" type="text/plain">
		        <{$topic_info.subject_text|default:""}>
		    </script>
		    <!-- 配置文件 -->
		    <script type="text/javascript" src="/static/public/ueditor/ueditor.config.js"></script>
		    <!-- 编辑器源码文件 -->
		    <script type="text/javascript" src="/static/public/ueditor/ueditor.all.js"></script>
		    <!-- 实例化编辑器 -->
		    <script type="text/javascript">
		        var ue = UE.getEditor('container');
		    </script>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">答案</label>
		<div class="layui-inline">
			<select id="add_document" lay-filter="add_document" lay-search>
	    		<option value="0">添加元素</option>
	    		<option value="+">+</option>
	    		<option value="-">-</option>
	    		<option value="*">*</option>
	    		<option value="/">/</option>
	    		<option value="(">(</option>
	    		<option value=")">)</option>
	    		<option value="=">=</option>
	    		<option value="n">数字</option>
    		</select>
		</div>
		<!-- <input type="button" id="btn_ok" value="添加答案" onclick="add_clac()" /> -->
		<div class="layui-form-mid layui-word-aux ss" style="display: none; float: none;">算式预览：<span class="ss_box"></span></div>
	</div>

	<!-- <div class="layui-form-item">
		<label class="layui-form-label">答案List</label>
		<div class="layui-input-block" id="daan_list">
			
		</div>
	</div> -->

	<div class="layui-form-item">
		<label class="layui-form-label">难度等级</label>
		<div class="layui-input-block">
			<input type="radio" name="difficulty_level" value="1" title="难" <{if $topic_info.difficulty_level|default:"" == 1}> checked <{/if}>>
			<input type="radio" name="difficulty_level" value="2" title="中" <{if $topic_info.difficulty_level|default:"" == 2 || !isset($topic_info)}> checked <{/if}>>
			<input type="radio" name="difficulty_level" value="3" title="易" <{if $topic_info.difficulty_level|default:"" == 3}> checked <{/if}>>
		</div>
	</div>

	<div class="layui-form-item layui-form-text">
		<label class="layui-form-label">答案解析</label>
		<div class="layui-input-block">
			<textarea class="layui-textarea layui-hide editor" name="analysis" lay-verify="content" id="editor2"><{$topic_info.analysis|default:""}></textarea>
		</div>
	</div>

	<div class="layui-input-block">
		<button class="layui-btn" lay-submit lay-filter="sub_topic">保存</button>
	</div>
</form>
<{include file="public_html/footer.html"}>
<script>
	function add_clac(){
		alert("ok");
		var clac_text = $(".ss_box").text();
		$("#daan_list").append('<div><span>'+clac_text+'</span><input type="hidden" name="daan_array[]" value="'+clac_text+'" /></div>');
		$(".ss_box").text('');
	}
	layui.use(['form', 'jquery', 'layedit', 'element'], function(){
		var layedit = layui.layedit,form = layui.form(),$ = layui.jquery, element = layui.element();
		/**
		 * book_id
		 * @param  {[type]} data){			var ii                                                         [description]
		 * @param  {[type]} success:      function(result){					layer.close(ii);					if(result.code [description]
		 * @return {[type]}               [description]
		 */
		form.on('select(subject)', function(data){
			var ii = layer.load();
			var subject_id = $(data.elem).val();
			$("#book").html('<option value="0">请选择课本</option>');
			form.render('select');
			$.ajax({
				type: "POST",
				url: "/topic/ignore_get_books",
				dataType:"json",
				data:{subject_id:subject_id},
				success: function(result){
					layer.close(ii);
					if(result.code == 1){
						var html ='';
						$.each(result.chapter_list, function(i, obj) {
							$("#book").append('<option value="'+obj.id+'">'+obj.title+'</option>');
						});
						
						form.render('select');
					}
				}
			});
		});

		form.on('select(book)', function(data){
			var ii = layer.load();
			var book_id = $(data.elem).val();
			$("#chapter_id").html('<option value="0">请选择章节</option>');
			form.render('select');
			$.ajax({
				type: "POST",
				url: "/topic/ignore_get_book_chapter",
				dataType:"json",
				data:{book_id:book_id},
				success: function(result){
					layer.close(ii);
					if(result.code == 1){
						var html ='';
						$.each(result.chapter_list, function(i, obj) {
							html += '<option value="'+obj.id+'">'+obj.title+'</option>';
							if(obj.sub){
								$.each(obj.sub, function(j, obj1) {
									html += '<option value="'+obj1.id+'">----'+obj1.title+'</option>';
								});
							}
							// html += '</optgroup>'
						});
						$("#chapter_id").append(html);
						$("#book_name").val($("#book option:selected").text())
						form.render('select');
					}
				}
			});
		});

		layui.form().on('select(add_document)', function(data){
			var _this = $(data.elem);
			var document = _this.val();
			var d = 'readonly';
			var zuxian = _this.closest(".layui-form-item");
			if(document != 0){
				if(document == 'n'){
					document = '';
					d = '';
				}
				var html = '<div class="layui-inline ss_document_box">';
					html +=	'<input type="text" '+d+'  name="text[]" value="'+document+'" style="width: 50px;" class="layui-input no_change">';
					html += '<a href="javascript:;"><i class="layui-icon edit_document" style="font-size: 10px; color: #1E9FFF;">&#xe642;</i></a>';
					html += '</div>';
				if(zuxian.find(".change").length > 0){
					zuxian.find(".change").closest(".ss_document_box").before(html);
					zuxian.find(".change").closest(".ss_document_box").remove();
				}else{
					_this.closest(".layui-inline").before(html);
				}
				
				_this.closest(".layui-form-item").find(".ss").show();

				var obj = _this.closest(".layui-form-item").find(".ss").children();
				create_ss(obj);

				if(document == ''){
					_this.closest(".layui-inline").prev().find("input[type='text']").focus();	
				}
				// _this.options[0].selected = true;
			}
		});

		$(document).on('click', '.edit_document', function(){
			// alert($(this).html())
			var _this = $(this);
			var zuxian = _this.closest(".layui-form-item");
			zuxian.find(".edit_document").css("color", "#1E9FFF");
			zuxian.find(".edit_document").removeClass("change");
			zuxian.find(".edit_document").addClass("no_change");
			var input = _this.closest(".ss_document_box").find("input[type='text']");
			if(input.hasClass("no_change")){
				_this.css("color", "red");
				input.removeClass("no_change");
				input.addClass("change");
			}else{
				_this.css("color", "#1E9FFF");
				input.removeClass("change");
				input.addClass("no_change");
			}
		})
		$(document).on('change', '.ss_document_box > input[type="text"]', function(){
			var obj = $(this).closest(".layui-form-item").find(".ss").children();
			create_ss(obj)
		})
	});

	function create_ss(obj){
		var html = '';
		var zuxian = obj.closest(".layui-form-item").find(".ss_document_box")
		$.each(zuxian, function(i, j){
			html += $(j).children().val();
		})
		obj.html(html);
	}
</script>